<!--
 * @Author: wusd
 * @Date: 2022-05-18 14:58:44
 * @LastEditors: wusd
 * @LastEditTime: 2022-06-17 10:14:17
 * @Description: 
 * 
-->
<script lang="tsx">
import { Component, Vue } from 'vue-property-decorator'
import { SearchParams } from 'wsd-components/types/table.d'
import { WPageConfig } from 'wsd-components/types/page.d'
@Component({
  name: 'userSys',
  components: {}
})
export default class UserSys extends Vue {
  public pageConfig: WPageConfig = {
    tableConfig: {
      nodeData: {
        attrs: {
          border: true
        }
      },
      search: {
        list: [
          {
            label: '名称',
            prop: 'name',
            defaultValue: '75'
          },
          {
            label: '年龄',
            prop: 'age',
            type: 'el-input'
          },
          {
            label: '年龄1',
            prop: 'age1',
            type: 'el-input'
          },
          {
            label: '年龄2',
            prop: 'age2',
            type: 'el-input'
          },
          {
            label: '年龄3',
            prop: 'age3',
            type: 'el-input'
          }
        ]
      },
      outBtns: [
        {
          key: 'add',
          type: 'primary',
          text: '新增'
        }
      ],
      innerBtns: [
        {
          key: 'delete',
          text: '删除'
        },
        {
          key: 'update',
          text: '编辑'
        }
      ],
      pagination: {
        nodeData: {
          attrs: {
            background: false
          }
        }
      },
      api: {
        list: (searchParams: SearchParams) => {
          return new Promise(resolve => {
            let content = [],
              total = 10
            for (let i = 0; i < total; i++) {
              content.push({
                name: 'wsd' + i,
                age: 14
              })
            }
            resolve({
              total,
              content: content.slice(
                (searchParams?.pageNum || 1) * (searchParams?.pageSize || 10) - (searchParams?.pageSize || 10)
              )
            })
          })
        },
        delete: () => {
          return new Promise(resolve => {
            resolve({
              code: 0
            })
          })
        }
      },
      columns: [
        {
          label: '序号',
          type: 'index'
        },
        {
          type: 'selection'
        },
        {
          label: '名称',
          prop: 'name',
          nodeData: {
            attrs: {
              'show-overflow-tooltip': true
            }
          }
        },
        {
          label: '年龄',
          prop: 'age'
        }
      ]
    },
    formConfig: {
      columns: [
        {
          label: '姓名',
          prop: 'name',
          rules: [
            {
              required: true,
              message: 'www'
            }
          ],
          nodeData: {
            attrs: {
              clearable: true
            }
          },
          list: [
            {
              label: '测试文字1',
              value: 14
            },
            {
              label: '测试文字2',
              value: 15
            }
          ]
        },
        {
          label: '年龄',
          prop: 'age',
          type: 'el-select',
          rules: [
            {
              required: true,
              message: 'www'
            }
          ],
          nodeData: {
            attrs: {
              clearable: true
            }
          },
          list: [
            {
              label: '14岁',
              value: 14
            },
            {
              label: '15岁',
              value: 15
            }
          ]
        }
      ]
    },
    api: {
      add: formData => {
        console.log('add', formData)
        return new Promise(resolve => {
          resolve({
            code: 0
          })
        })
      }
    }
  }
  protected render() {
    return (
      <div>
        <w-page ref="form" pageConfig={this.pageConfig}></w-page>
      </div>
    )
  }
}
</script>

<style lang="scss"></style>
